<template>
<div>
    <div class="title">热销推荐</div>
    <ul class="title-ul">       
            <router-link tag="li" :to="'/detail/'+item.id" class="item border-bottom" v-for="item of list" :key="item.index"> 
                    <div class="w100">
                        <div class="item-info-left">
                             <img class="item-img" :src="item.imgUrl"/>
                        </div>                                      
                        <div class="item-info">
                            <p class="item-title">{{item.title}}</p>
                            <div class="mp-like-comment">
                                <span class="mpf-starlevel">                              
                                    <span class="star">{{item.star}}</span>
                                </span>
                                <span class="mp-comment-num">{{item.comment}}条评论</span>
                            </div>
                            <p class="item-button">¥<i>{{item.pice}}</i>起<span class="place">{{item.place}}</span></p>
                        </div>
                    </div>                        
                     <div class="introduce" v-if="item.introduce">
                        <p>{{item.introduce}}</p>
                    </div>  
                   
            </router-link>
                    
    </ul>
</div>
  
</template>

<script>
export default {
  name: "HomeRecommend",
  props: {
    list: Array
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/ellipsis.styl';

.star {
    color: #ff9300;
    font-size: 0.4rem;
}
.w100{
    width 100%
}

.mp-like-comment {
    margin: 0.1rem 0;
}
.item-info-left{
 width: 26%;
    float: left;

}

.title {
    margin-top: 0.15rem;
    line-height: 0.8rem;
    background: white;
    text-indent: 0.2rem;
    border-radius: 10px;
}
.place{
    float right 
    font-size 0.1rem
}
.item {
    // display: flex;
    // height: 2.1rem;
    overflow: hidden;
    border-bottom: 1px solid #1213;
    margin-bottom: 0.1rem;
}
.introduce p{
    overflow: hidden;
    width: 100%;
    text-align: center;
    height: 0.8rem;
    line-height: 0.8rem;
    color #f55;
        font-size: 0.12rem;
}

.item-img {
   width 100%;
    padding: 0.1rem;
}

.item-info {
       /* -webkit-box-flex: 1; */
    // -ms-flex: 1;
    /* flex: 1; */
    padding: 0.1rem;
   width: 68%;
    float: left;
    margin-left: 0.15rem;
}

.item-title {
    line-height: 0.45rem;
    font-size: 0.32rem;
    margin-top: 0.2rem;
}

.item-desc {
    line-height: 0.4rem;
    color: black;
    opacity: 0.5;
}

.item-button {
        margin-top: 0.3rem;
}

.item-button i {
    font-style: none;
    color: #ff9300;
    font-size: 0.45rem;
}
.mp-comment-num{
    margin-left 0.1rem;
}

.title-ul {
    background: white;
}
</style>
